<!--
 * @Description: 
 * @Author: 张文韬
 * @Date: 2024-06-24 15:29:13
 * @LastEditTime: 2024-06-26 11:35:05
 * @LastEditors: 张文韬
 * @Reference: 
-->
<template>
  <div>
    <e-table
      :data="tableData[0]"
      :columns="columns"
      :pageData="pageInfo"
      :loading="loading"
      :height="600"
    ></e-table>
    <!-- <e-table
      :columns="columns"
      :height="80"
    ></e-table>
    <template v-for="(item, index) in tableData">
      <div class="p-5px text-left text-red border-l-1 border-r-1 border-gray-3">{{ index }}</div>
      <e-table
        v-if="tableData.length  > 0"
        :data="item"
        :columns="columns"
        :pageData="pageInfo"
        :loading="loading"
        :show-header="false"
      ></e-table>
    </template> -->
  </div>
</template>

<script setup>

import eTable from '@/components/e-table'

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => {}
  },
  pageInfo: {
    type: Object,
    default: () => ({
      pageShow:false,
      total: 0,
      currentPage: 1,
      pageSize: 10
    })
  },
})

const columns = computed(() => {
  return [
    {
      type: 'index',
      width: 50
    }, {
      label: '保障内容',
      minWidth: 200,
      prop: 'name'
    }, {
      label: '方案名称',
      minWidth: 150,
      subColumns: props.data?.menuEntityList?.map(o => ({
        label: o.name,
        prop: o.id,
        // className: 'mark-color'
      }))
    },
  ]
})

const tableData = computed(() => [
  props.data.bbProductGuaranteeList?.map(o => {
    o.priceEntityList.map(p => {
      o[p.type] = p.price
    })
    return o
  })
])

// watch(() => props.data, (val) => {
//   console.log(111, val)
// }, { immediate: true, deep: true})

</script>